<script lang="ts" setup>
import { ref, toRefs, onMounted, onBeforeMount, onUnmounted, reactive } from 'vue';
import { addZero } from "@/utils/fun";
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
const props = defineProps({
  list: {
    type: Array,
    default: () => [1, 2, 3, 4]
  },
  len: {
    type: Number,
    default: 3
  },
})
const { list } = toRefs(props)
const state = reactive({
  list: [] as any[],
  index: 1,
  current: 1,
  wrapperWidth: 0,
  innerUnit: 0,
  innerMargin: 0,
  isScroll: false,
  timer: 0
})
const emit = defineEmits(['change'])
const boxDom = ref()
onBeforeMount(() => {
  let last, frist, len = list.value.length;
  if (len) {
    if (len === 1) {
      frist = list.value[0]
      state.list = [frist, frist, frist, frist, frist, frist, frist, frist, frist]
    }
    if (len === 2) {
      state.list = [...list.value, ...list.value, ...list.value, ...list.value, ...list.value]
    }
    if (len === 3) {
      frist = list.value[0]
      last = list.value[2]
      state.list = [last, ...list.value, ...list.value, ...list.value, frist]
    }
    if (len > 3) {
      frist = list.value.slice(0, 4)
      last = list.value.slice(-4)
      state.list = [...last, ...list.value, ...frist]
    }
  }
})
onMounted(() => {
  init()
  change()
  window.onresize = () => {
    if (route.path === '/home') {
      init()
      change()
    }
  }
})
onUnmounted(() => {
  window.onresize = null
})
const init = () => {
  let boxwidth = boxDom.value.offsetWidth
  let unit = boxwidth * 0.38
  let margin = (boxwidth - unit * 2) / 2

  state.wrapperWidth = boxwidth
  state.innerUnit = unit
  state.innerMargin = margin

  let childres = Array.from(boxDom.value.children[0].children)
  childres.forEach((el: any) => {
    el.style.marginRight = margin + 'px'
  })
}

const clickFn = (e: number) => {
  if (state.isScroll) return
  setTime()
  state.index += e
  change()
}
const setTime = () => {
  if (state.timer) return
  state.isScroll = true
  state.timer = window.setTimeout(() => {
    state.isScroll = false
    state.timer = 0
  }, 1000)
}
const change = () => {
  let len = list.value.length
  translate(true)

  if (state.index > len) {
    state.index = 1
  }

  if (state.index === 0) {
    state.index = len
    state.current = len
  } else {
    state.current = state.index
  }
  if (state.current === 1 || state.current === len) {
    window.setTimeout(() => {
      // let innerBox = boxDom.value.children[0]
      // console.log(innerBox.style.transform, (state.innerUnit / 2) + ((state.wrapperWidth / 2) * (state.index)))
      translate(false)
    }, 1000);
  }
  emit("change", state.current - 1);
}
const translate = (show: boolean) => {
  let innerBox = boxDom.value.children[0]
  innerBox.style.transform = `translate3d(-${(state.innerUnit / 2) + ((state.wrapperWidth / 2) * (state.index + 4))}px, 0px, 0px)`
  // innerBox.style.left = `-${(state.innerUnit / 2) + ((state.wrapperWidth / 2) * (state.index))}px`
  innerBox.style.transitionDuration = `${show ? 1000 : 0}ms`
}
const handleClick = (path: string) => {
  if (path) {
    router.push(path)
  }
}

</script>

<template>
  <div class="scroll-wrapper" ref="boxDom">
    <div class="swiper-list">
      <div class="swiper-item" v-for="item in state.list" :key="item" @click="handleClick(item.path)">
        <slot>
          <div class="swiper-item-inner"><img :src="item.src" :alt="item.title"></div>
        </slot>
      </div>
    </div>
    <div class="button-wrapper prev" @click="clickFn(-1)">
      <div class="arrow"></div>
    </div>
    <div class="button-wrapper next" @click="clickFn(1)">
      <div class="arrow"></div>
    </div>
    <div class="color-box left"></div>
    <div class="color-box right"></div>
    <div class="content-info">
      <div class="item-index">
        <div class="num">{{ addZero(state.current) }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.scroll-wrapper {
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
}

.swiper-list {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transition-duration: 0ms;
}

.swiper-item {
  overflow: hidden;
  z-index: 2;
  position: relative;
  // width: 662px;
  // height: 100%;
  width: 38%;
  height: 0;
  padding-bottom: 21.28%;
  // margin-right: 244px;
  flex-shrink: 0;
  transition-property: transform;
  border: solid 2px #000;
  border-radius: 12px;
  overflow: hidden;

  &:hover {
    box-shadow: 0px 15px 55px 15px rgba(98, 102, 117, 0.35);
  }
}

.swiper-item-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.color-box {
  z-index: 10;
  position: absolute;
  top: 0;
  bottom: 100px;
  width: 15%;

  &.left {
    left: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .8) 35%, transparent 100%);
  }

  &.right {
    right: 0;
    background: linear-gradient(-90deg, #ffffff 0%, rgba(255, 255, 255, .8) 35%, transparent 100%);
  }
}

.button-wrapper {
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 100px;
  cursor: grab;

  &.prev {
    left: 0;

    .arrow {
      // left: 50%;
      transform: translate(10%, -50%);

      &::after {
        border-width: 0 0 2px 2px;
      }
    }
  }

  &.next {
    right: 0;

    .arrow {
      // right: 50%;
      transform: translate(-10%, -50%);

      &::after {
        border-width: 2px 2px 0 0;
      }
    }
  }

  .arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    /* opacity: 0;
    visibility: hidden; 
    transform: translate(-50%, -50%);*/
    transition: all .3s ease-out 0s;

    &::after {
      content: '';
      position: absolute;
      left: 15px;
      top: 15px;
      width: 30px;
      height: 30px;
      border: solid 2px #626675;
      transform: rotate(45deg);
    }
  }

  // &:hover {
  //   .arrow {
  //     opacity: 1;
  //     visibility: visible;
  //   }
  // }
}

.content-info {
  position: absolute;
  top: 0;
  left: 50%;
  width: 38%;
  height: 0;
  padding-bottom: 21.28%;
  font-weight: 600;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  visibility: visible;
  transition: all .6s cubic-bezier(.215, .61, .355, 1) 0s;

  .item-index {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: -30px;

    .num {
      font-family: Arial;
      font-size: 115px;
      line-height: 80px;
      color: rgba(0, 0, 0, .05);
      text-stroke: 1px #f00;
      -webkit-text-stroke: 1px white;
      -webkit-text-fill-color: rgba(0, 0, 0, .05);
      // text-shadow: 1px 1px 1px #fff;
    }
  }
}
</style>